<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雷霆战机</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url(./images/bg.png);
            background-size: 100%;
        }
        #game-board {
            position: relative;
            width: 350px;
            height: 600px;
            background-image: url(./images/game_bg.png);
            background-size: 400px;
            background-repeat: no-repeat;
            border: 1px solid #fff;
            overflow: hidden;
        }
        .fighter-plane {
            position: absolute;
            width: 40px;
            height: 50px;
            background-image: url(./images/myPlane_0.png);
            background-size: 40px;
            bottom: 10px;
            left: calc(50% - 20px);
        }
        .btn {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            height: 50px;
            width: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #bae5f7;
            z-index: 9999;
            box-shadow: 10px 10px 30px #eee;
            border-radius: 5px;
            cursor: pointer;
        }
        .bullet {
            position: absolute;
            width: 4px;
            height: 15px;
            background-image: url(./images/myShoot.png);
            background-size: 4px;
        }
        .enemy {
            position: absolute;
            width: 30px;
            height: 39px;
            background-image: url(./images/enemyPlane_2.png);
            background-size: 30px;
        }
        .ennmy-bullet {
            position: absolute;
            width: 4px;
            height: 15px;
            background-image: url(./images/enemyShoot.png);
            background-size: 4px;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div class="btn" id="start-game-btn">开始游戏</div>
        <div class="fighter-plane" id="fighter-plane"></div>
    </div>

    <script>
        const gameBoard = document.getElementById('game-board');
        const startGameBtn = document.getElementById('start-game-btn');
        const fighterPlane = document.getElementById('fighter-plane');
        // 飞机每次按下移动距离
        const fighterPlaneSpeed = 5;
        // 我方子弹
        let bullets = [];
        const bulletSpeed = 9;
        // 敌方飞机
        let enemies = [];
        let enemySpeed = 3;
        let enemyBullets = [];
        let enemyBulletSpeed = 4;


        // 飞机移动按键监听
        const isKeyDown = { ArrowLeft: false, ArrowRight: false};
        // 监听键盘按下事件
        function myKeydown(event) {
            const { key } = event;
            if (key === 'ArrowLeft') {
                isKeyDown.ArrowLeft = true;
            } else if (key === 'ArrowRight'){
                isKeyDown.ArrowRight = true;
            }
        }
        // 监听按键抬起事件
        function myKeyup(event) {
            const { key } = event;
            if (key === 'ArrowLeft') {
                isKeyDown.ArrowLeft = false;
            } else if (key === 'ArrowRight'){
                isKeyDown.ArrowRight = false;
            }
        }
        // 飞机移动
        function moveFighterPlane() {
            let left = parseInt(getComputedStyle(fighterPlane).left);
            if (isKeyDown.ArrowLeft && left > 0) {
                fighterPlane.style.left = `${left - fighterPlaneSpeed}px`;
            } else if (isKeyDown.ArrowRight && left < gameBoard.offsetWidth - fighterPlane.offsetWidth){
                fighterPlane.style.left = `${left + fighterPlaneSpeed}px`;
            }
        }
        // 射击
        function shoot() {
            const bullet = document.createElement('div');
            bullet.classList.add('bullet');
            bullet.style.left = `${parseInt(getComputedStyle(fighterPlane).left)+fighterPlane.offsetWidth / 2 - 2}px`;
            bullet.style.bottom = `${parseInt(getComputedStyle(fighterPlane).bottom) + fighterPlane.offsetHeight}px`;
            gameBoard.appendChild(bullet);
            bullets.push(bullet);
        }
        // 子弹移动
        function moveBullets() {
            for (let i = 0; i < bullets.length; i++) {
                const bullet = bullets[i];
                let bottom = parseInt(getComputedStyle(bullet).bottom);
                if (bottom < gameBoard.offsetHeight) {
                    bullet.style.bottom = `${bottom + bulletSpeed}px`;
                } else {
                    gameBoard.removeChild(bullet);
                    bullets.splice(i,1);
                    i--;
                }
            }
        }

        // 创建敌军战机
        function createEnemy() {
            const enemy = document.createElement('div');
            enemy.classList.add('enemy');
            enemy.style.left = `${Math.random() * (gameBoard.offsetWidth - 30)}px`;
            enemy.style.top = '0px';
            gameBoard.appendChild(enemy);
            enemies.push(enemy);
        }
        //敌方飞机移动
        function moveEnemies() {
            for (let i = 0; i < enemies.length; i++) {
                const enemy = enemies[i];
                let top = parseInt(getComputedStyle(enemy).top);
                if (top < gameBoard.offsetHeight) {
                    enemy.style.top = `${top + enemySpeed}px`;
                } else {
                    gameBoard.removeChild(enemy);
                    enemies.splice(i,1);
                    i--;
                }
            }
        }
        // 敌方战机射击
        function enemyShoot() {
            for (let i = 0; i < enemies.length; i++) {
                const enemy = enemies[i];
                if (Math.random() < 0.1) {
                    const enemyBullet = document.createElement('div');
                    enemyBullet.classList.add('ennmy-bullet');
                    enemyBullet.style.left = `${parseInt(getComputedStyle(enemy).left) + enemy.offsetWidth / 2 - 2 }px`;
                    enemyBullet.style.top = `${parseInt(getComputedStyle(enemy).top) + enemy.offsetHeight}px`;
                    gameBoard.appendChild(enemyBullet);
                    enemyBullets.push(enemyBullet);
                }
            }
        }
        // 敌方战机子弹移动
        function moveEnemyBullets() {
            for (let i = 0; i < enemyBullets.length; i++) {
                const enemyBullet = enemyBullets[i];
                let top = parseInt(getComputedStyle(enemyBullet).top);
                if (top < gameBoard.offsetHeight) {
                    enemyBullet.style.top = `${top + enemyBulletSpeed}px`;
                } else {
                    gameBoard.removeChild(enemyBullet);
                    enemyBullets.splice(i,1);
                    i--;
                }
            }
        }

        // 检查碰撞
        function checkCollisions() {
            // 检查子弹是否打中敌方飞机
            for (let i = 0; i < bullets.length; i++) {
                const bullet = bullets[i];
                for (let j = 0; j < enemies.length; j++) {
                    const enemy = enemies[j];
                    // 获取DOM元素大小机器相对浏览器视口左、上、右、下的位置
                    const bulletRect = bullet.getBoundingClientRect();
                    const enemyRect = enemy.getBoundingClientRect();
                    if (bulletRect.left < enemyRect.right &&
                        bulletRect.right > enemyRect.left &&
                        bulletRect.top < enemyRect.bottom &&
                        bulletRect.bottom > enemyRect.top
                    ) {
                        gameBoard.removeChild(bullet);
                        gameBoard.removeChild(enemy);
                        bullets.splice(i,1);
                        enemies.splice(j,1);
                        i--;
                        j--;
                    }
                }
            }
        
            // 检查敌军飞机是否和我方飞机碰撞
            for (let i = 0; i < enemies.length; i++) {
                const enemy = enemies[i];
                const enemyRect = enemy.getBoundingClientRect();
                const fighterPlaneRect = fighterPlane.getBoundingClientRect();
                if (fighterPlaneRect.left < enemyRect.right &&
                        fighterPlaneRect.right > enemyRect.left &&
                        fighterPlaneRect.top < enemyRect.bottom &&
                        fighterPlaneRect.bottom > enemyRect.top
                    ) {
                        finishGame();
                    }
            }

            // 检查我方飞机是否被击中
            for (let i = 0; i < enemyBullets.length; i++) {
                const enemyBullet = enemyBullets[i];
                const fighterPlaneRect = fighterPlane.getBoundingClientRect();
                const enemyBulletRect = enemyBullet.getBoundingClientRect();
                if (fighterPlaneRect.left < enemyBulletRect.right &&
                        fighterPlaneRect.right > enemyBulletRect.left &&
                        fighterPlaneRect.top < enemyBulletRect.bottom &&
                        fighterPlaneRect.bottom > enemyBulletRect.top
                    ) {
                        finishGame();
                    }
            }
        }

        // 开始游戏时清除敌军飞机和子弹
        function clearEnemiesAndBullets() {
            gameBoard.innerHTML = '';
            gameBoard.appendChild(startGameBtn);
            gameBoard.appendChild(fighterPlane);
            bullets = [];
            enemies = [];
            enemyBullets = [];
        }

        // 创建Set来管理定时器
        const timers = new Set();
        function startGame() {
            const timer1 = setInterval(() => {
                moveFighterPlane();
                moveBullets();
                moveEnemies();
                checkCollisions();
                moveEnemyBullets();
            },16);

            // 定时发射子弹
            const timer2 = setInterval(shoot,120);
            const timer3 = setInterval(createEnemy, 800);
            const timer4 = setInterval(enemyShoot, 100);

            // 将定时器添加到Set对象中
            timers.add(timer1);
            timers.add(timer2);
            timers.add(timer3);

            clearEnemiesAndBullets();
        }
        // 结束游戏时清除定时
        function finishGame() {
            startGameBtn.style.display = 'flex';
            for (const timer of timers) {
                clearInterval(timer);
            }
        }

        document.addEventListener('keydown', myKeydown);
        document.addEventListener('keyup',myKeyup);

        // 开始游戏
        startGameBtn.addEventListener('click', e => {
            startGameBtn.style.display = 'none';
            startGame();
        })
    </script>
</body>
</html>